<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
request.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人信息-卓应商城</title>

	<link rel="stylesheet" href="/common/css/userinfo/base.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/global.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/header.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/home.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/user.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/bottomnav.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/footer.css" type="text/css">

	<script type="text/javascript" src="/common/js/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="/common/js/order/header.js"></script>
	<script type="text/javascript" src="/common/js/order/home.js"></script>
	
	<style type="text/css">
		#btn-submit{
			width:60px;
			height:30px;
			line-height:30px;
			font-family:"Microsoft YaHei";
			font-size:18px;
			display:inline-block;
			text-decoration:none;
			border:1px solid #d00000;
			border-radius:2px;
			background:#d00000;
			color:#fff;
			margin:0;
			text-align:center;
			cursor:pointer;
		}
		
		
	</style>
	
	<script>
		$(document).ready(function(){
			//隐藏手机号
			var phone = $("#phone-number").text();
			var newPhone = phone.substr(0,3)+'****'+phone.substr(7);
			$("#phone-number").text(newPhone);
			
			//隐藏身份证号码
			var id = $("#id-number").text();
			var newId = id.substr(0,4)+'**********'+id.substr(14);
			$("#id-number").text(newId);
			
			//点击事件验证信息
			$("#btn-submit").click(function(){
				//修改验证有没有密保
				var question = $("#question").val();
				
				if(question != ""){
					//验证
					$("#hidden").removeClass("hide");
					$(".mask-trans").removeClass("hide");
				}else{
					//直接修改
					$("#btn-submit").attr("href","/user/showupdate");
				}
			});
			
			//取消验证
			$("#cancel").click(function(){
				$("#phone-ver").val("");
				$("#answer").val("");
				$("#hidden").addClass("hide");
				$(".mask-trans").addClass("hide");
			});
			
			//验证手机号是否存在以及是否规范
			$("#phone-ver").on("keyup",function(){
				var phone = $(this).val();
				var regex = /^1\d{10}$/;
				
				if(!regex.test(phone)){
					$(".phone-msg").text("请输入11位手机号");
					$(".phone-msg").removeClass("green");
					$(".phone-msg").addClass("red");
					return;
				}
				
				$.post(
						"/user/verphone",
						{"phone":phone},
						function(data){
							if(data=="success"){
								$(".phone-msg").text("手机号正确");
								$(".phone-msg").removeClass("red");
								$(".phone-msg").addClass("green");
							}else{
								$(".phone-msg").text("手机号不正确");
								$(".phone-msg").removeClass("green");
								$(".phone-msg").addClass("red");
							}
						}
					);
			});
			
			//验证密保是否正确
			$("#answer").on("blur",function(){
				var answer = $(this).val();
				var phone = $("#phone-ver").val();
				
				$.post(
						"/user/veranswer",
						{
							"answer":answer,
							"phone":phone
						},
						function(data){
							if(data=="success"){
								$(".answer-msg").text("密保答案正确");
								$(".answer-msg").removeClass("red");
								$(".answer-msg").addClass("green");
								$("#submit").click(function(){
									$("#submit").attr("href","/user/showupdate");
								});
							}else{
								$(".answer-msg").text("密保答案错误！");
								$(".answer-msg").removeClass("green");
								$(".answer-msg").addClass("red");
							}
						}
					);
			});
			
			
		});
	</script>
	
</head>
<body>
		<!-- 顶部导航 end -->

		<!-- 头部 start -->
		<div class="header w1210 bc mt15">
			<!-- 头部上半部分 start 包括 logo、搜索、用户中心和购物车结算 -->
			<div class="logo w1210">
				<h1 class="fl" ><a href="/user/loginreg/index"><img src="http://localhost:8083/fileserver/logo/logo.jpg" style="height: 70px; width: 150px;"></a></h1>
			</div>
			<!-- 头部上半部分 end -->

			<div class="clear"></div>

			<!-- 导航条部分 start -->
			<div class="nav w1210 bc mt10">
				<div class="navitems fl">
					<ul class="fl">
						<li class="current">
							<a href="/user/loginreg/index">首页</a>
						</li>
						<li>
							<a href="/product/fytype">商品大全</a>
						</li>
						<li>
							<a href="/product/showtype?tid=1">手机频道</a>
						</li>
						<li>
							<a href="/product/showtype?tid=2">数码产品</a>
						</li>
						<li>
							<a href="/product/showtype?tid=3">家用电器</a>
						</li>
						<li>
							<a href="/product/showtype?tid=5">衣装服饰</a>
						</li>
						<li>
							<a href="/product/showtype?tid=7">电子图书</a>
						</li>
					</ul>
					<div class="right_corner" style="float:right;">
						<a href="/shopcar/show">购物车</a>
					</div>
				</div>
			</div>
			<!-- 导航条部分 end -->
		</div>
		<!-- 头部 end-->

		<div class="clear"></div>

		<!-- 页面主体 start -->
		<div class="main w1210 bc mt10">
			<div class="crumb w1210">
				<h2>
					<strong><a href="/user/userinfo">个人中心</a></strong>
					<span>></span>
					<span>个人信息</span>
				</h2>
			</div>

			<!-- 左侧导航菜单 start -->
			<div class="menu fl">
				<h3><a href="/user/userinfo">个人中心</a></h3>
				<div class="menu_wrap">
					<dl>
						<dt>订单中心</dt>
						<dd>&nbsp;&nbsp;
							<a href="/order/show">我的订单</a>
						</dd>
						<dd>&nbsp;&nbsp;
							<a href="/user/mycollect">我的收藏</a>
						</dd>
					</dl>
					<dl>
						<dt>账户中心</dt>
						<dd class="cur">&nbsp;&nbsp;
							<a href="/user/userinfo">个人信息</a>
						</dd>
						<dd>&nbsp;&nbsp;
							<a href="/user/showaddress">收货地址</a>
						</dd>
					</dl>
					<dl>
						<dt>个人卖家</dt>
						<dd>&nbsp;&nbsp;
							<a href="/systemer/usertjsp">个人卖家中心</a>
						</dd>
					</dl>
				</div>
			</div>
			<!-- 左侧导航菜单 end -->

			<!-- 右侧内容区域 start -->
			<div class="content fl ml10">
				<!-- 头部信息 start -->
				<div class="user_hd">
					<div class="head-left">
						<h3><a href="/user/userinfo">个人信息</a></h3>
					</div>
					<div class="head-left">
						<h3><a href="/user/userimg">头像照片</a></h3>
					</div>
				</div>
				<!-- 头部信息 end -->
				
				<div class="user_bd mt10">
					<div class="div-class">
						<div class="form">
							<div class="item">
								<span class="label">用户名：</span>
								<div class="float-left">
									<strong>${user.userName}</strong>
								</div>
								<div class="clear"></div>
							</div>
							<div class="item">
								<span class="label">身份证号码：</span>
								<div class="float-left">
									<strong id="id-number">${user.userId}</strong>
								</div>
								<div class="clear"></div>
							</div>
							<div class="item">
								<span class="label">手机号码：</span>
								<div class="float-left">
									<strong id="phone-number">${user.userPhone}</strong>
								</div>
								<div class="clear"></div>
							</div>
							<div class="item">
								<span class="label">年龄：</span>
								<div class="float-left">
									<strong id="age-number">
										<c:choose>
											<c:when test="${user.userAge==0}">未知</c:when>
											<c:otherwise>${user.userAge}</c:otherwise>
										</c:choose>
									</strong>
								</div>
								<div class="clear"></div>
							</div>
							<div class="item">
								<span class="label">性别：</span>
								<div class="float-left">
									<strong>
										<c:choose>
											<c:when test="${user.userGender==null}">未知</c:when>
											<c:otherwise>${user.userGender}</c:otherwise>
										</c:choose>
									</strong>
								</div>
								<div class="clear"></div>
							</div>
							<div class="item">
								<span class="label">&nbsp;</span>
								<div class="float-left">
									<a id="btn-submit" >修改</a>
								</div>
								<div class="clear"></div>
							</div>
						</div>
					</div>
					<div id="user-info">
						<div class="user-img">
							<img alt="用户头像" src="http://localhost:8083/fileserver/userimg/${user.userImg}" />
						</div>
						<div class="user-info-more">
							<div class="info-div"><b>用户名：${user.userName}</b></div>
							<div class="info-div">会员类型：
								<c:choose>
									<c:when test="${user.userPart==1}">
										个人用户
									</c:when>	
									<c:otherwise>
										商家
									</c:otherwise>
								</c:choose>
							</div>
						</div>
					</div>
					<!-- 隐藏遮罩层 -->
					<div class="mask-trans hide"></div>
					<!-- 隐藏框做修改个人信息验证 start -->
					<div id="hidden" class="hide">
						<div class="user-hd">
							<h3>信息验证</h3>
						</div>
						<div class="info-ver">
							<div class="item">
								<span class="label">手机号码：</span>
								<div class="float-left">
									<input id="phone-ver" class="input-text" name="phone" type="text"/>
									<span class="phone-msg"></span>
								</div>
								<div class="clear"></div>
							</div>
							<div class="item">
								<span class="label">密保问题：</span>
								<div class="float-left">
									<input id="question" class="input-text input-text-new" name="question" value="${user.userQuestion}" readonly="readonly"/>
								</div>
								<div class="clear"></div>
							</div>
							<div class="item">
								<span class="label">密保答案：</span>
								<div class="float-left">
									<input id="answer" class="input-text" type="text" name="answer" placeholder="请输入密保答案"/>
									<span class="answer-msg"></span>
								</div>
								<div class="clear"></div>
							</div>
							<div class="item">
								<a id="submit" class="btn-submit1">验证</a>
								<a id="cancel" class="btn-submit1">取消</a>
							</div>
						</div>
					</div>
					<!-- 隐藏框做修改个人信息验证 end -->
					<div class="clear" ></div>
				</div>
			</div>
			<!-- 右侧内容区域 end -->
		</div>
		<!-- 页面主体 end-->

		<div class="clear"></div>

		<div class="footer w1210 bc mt10">
			<div class="mt20">Joinlabs商城|JYUI|聊|多看书城|JY路由器|视频电话|JY天猫店|JY淘宝直营店|JY网盟|JY移动|隐私政策|Select Region</div>
			<div>©JY.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
		</div>
		<!-- 底部版权 end -->
	</body>
</html>